<!doctype html>
<html>
    <head>
        <meta charset="utf-8">

        <title>Touchy : Wheel with Inertia</title>
        <meta name="description" content="An example use of the touchy.js jQuery plugin.  In this example we create a wheel interface that may be manipulated intuitively by a single finger gesture.">
        <meta name="author" content="Bill Fisher">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="HandheldFriendly" content="true" />


        <style type="text/css">
            * {
                -webkit-touch-callout: none;
                -webkit-user-select:none;
            }
            body {
                margin:0;
                background:#ccc;
                color:#333;
                font-family:Helvetica;
            }
            h1, p {
                padding:0;
                margin:0;
            }
            /* this wrap is only required to lock the app down and prevent scrolling */
            #wrap {
                position:absolute;
                top:0;
                left:0;
                bottom:0;
                right:0;
                padding:0;
                overflow:hidden;
            }
            #wheel {
                position:relative;
                margin:5% auto 0;
                width:400px;
                height:400px;
                border-radius:200px;
                background:url(matt_carlson_post-its/spin_blue.gif) 0 0 no-repeat;
                -webkit-box-shadow: 0px 0px 10px rgba(0,0,0, 0.5);
                font-size:400%;
                -webkit-transform:rotate3d(0,0,0,0deg);
            }
            #wheel p {
                position:absolute;
                top:160px;
                left:170px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>Wheel : Single Finger Rotation with Inertia</h1>
            <div id="wheel"></div>
        </div>

        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
 	    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	    <script>window.jQuery || document.write("<script src='../lib/jquery-1.7.2.min.js'>\x3C/script>")</script>

        <script src="../jquery.touchy.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                var degs = 0,
                    velocity = 0,
                    $target = $('#wheel'),
                    frameRateMS = 1000/60,
                    inertiaMotion = false;

                var handleTouchyRotate = function (e, phase, $target, data) {
                    switch (phase) {
                        case 'start':
                            inertiaMotion = false;
                            break;
                        case 'move':
                            degs += data.degreeDelta;
                            rotate(degs);
                            break;
                        case 'end':
                            inertiaMotion = true;
                            velocity = data.velocity;
                            releaseRadius =
                            spin(velocity);
                    }
                };

                var spin = function (velocity) {
                    // note that touchy returns velocity as degrees per millisecond only for touchy-rotate
                    degs += velocity * frameRateMS;
                    degs = degs > 359.99 ? 0 : degs;
                    rotate(degs);
                    if (inertiaMotion && Math.abs(velocity) > 0.001) {
                        setTimeout(function () {
                            spin(velocity * 0.99);
                        }, frameRateMS);
                    }
                    else {
                        velocity = 0;
                    }
                };

                var rotate = function (degrees) {
                    $target.css('webkitTransform','rotate3d(0,0,1,'+ degrees +'deg)');
                };

                $('#wheel').bind('touchy-rotate', handleTouchyRotate);
            });
        </script>
    </body>
</html>